import styles from './index.less';
import { List, Tabs, Flex } from 'antd-mobile';

export default function() {
  return (
    <div className={styles.normal}>
      <Flex direction="column" className={styles.main}>
        <Tabs
          tabs={[
            {
              title: '购买记录'
            },
            {
              title: '本期排行榜'
            }
          ]}
        >
          <List renderHeader={() => 'Icon in the left'}>
            <List.Item
              thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
              arrow="horizontal"
              onClick={() => {}}
            >
              My wallet
            </List.Item>
            <List.Item
              thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
              onClick={() => {}}
              arrow="horizontal"
            >
              My Cost Ratio
            </List.Item>
          </List>
          <List renderHeader={() => 'Icon in the left'}>
            <List.Item
              thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
              arrow="horizontal"
              onClick={() => {}}
            >
              My wallet
            </List.Item>
            <List.Item
              thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
              onClick={() => {}}
              arrow="horizontal"
            >
              My Cost Ratio
            </List.Item>
          </List>
        </Tabs>
      </Flex>
    </div>
  );
}
